<style lang="scss" scoped>

@import '../../style/mixin';
#shop {
    padding-top: 1.95rem;
    p,
    span,
    input {
        font-family: Helvetica Neue, Tahoma, Arial;
    }
}

//
// .menu {
//     position: relative;
//     display: inline-block;
//     margin: 0;
//     padding-left: 0;
//     background-color: #ebedef;
//     width: 100%;
//     &:before {
//         display: table;
//         content: "";
//     }
//     li {
//         list-style: none;
//     }
//     .is-opened .icon-arrow {
//         transform: rotate(180deg);
//     }
//     .secondUl {
//         display: none;
//     }
//     .sub-menu.is-opened {
//         .secondUl {
//             display: block;
//         }
//     }
//     .sub-menu {
//         .submenu-title {
//             position: relative;
//             height: 2rem;
//             line-height: 2rem;
//             font-size: 0.7rem;
//             color: #48576a;
//             padding: 0 1rem;
//             cursor: pointer;
//             position: relative;
//             transition: border-color .3s, background-color .3s, color .3s;
//             box-sizing: border-box;
//             white-space: nowrap;
//             .icon-arrow {
//                 position: absolute;
//                 right: 0.5rem;
//                 top: 0.6rem;
//                 z-index: 1;
//                 @include wh(0.7rem, 0.7rem);
//             }
//         }
//         [class*=" el-icon-"] {
//             font-family: element-icons!important;
//             speak: none;
//             font-style: normal;
//             font-weight: 400;
//             font-variant: normal;
//             text-transform: none;
//             line-height: 1;
//             vertical-align: baseline;
//             display: inline-block;
//             -webkit-font-smoothing: antialiased;
//             -moz-osx-font-smoothing: grayscale;
//         }
//         .menu-item-group-title {
//             padding: 0 1rem 0 1.5rem;
//         }
//         .children-item {
//             position: relative;
//             height: 2rem;
//             line-height: 2rem;
//             font-size: 0.7rem;
//             color: #48576a;
//             padding: 0 1rem;
//             cursor: pointer;
//             position: relative;
//             transition: border-color .3s, background-color .3s, color .3s;
//             box-sizing: border-box;
//             white-space: nowrap;
//         }
//         .menu-item-group >ul {
//             padding-left: 1.3rem;
//         }
//     }
// }
.sidebar-menu .menu {
    background-color: #e4e8f1;
}

.shop_container {
    padding-top: 1.95rem;
    display: flex;
    flex-direction: column;
    position: absolute;
    right: 0;
    left: 0;
    height: 100%;
}

.food_container {
    display: flex;
    flex: 1;
    padding-bottom: 2rem;
}

.menu_container {
    display: flex;
    flex: 1;
    overflow-y: hidden;
    position: relative;
    .menu_left {
        background-color: #f8f8f8;
        width: 3.8rem;
        overflow: scroll;
        .menu {
            position: relative;
            display: inline-block;
            margin: 0;
            padding-left: 0;
            background-color: #ebedef;
            width: 100%;
            overflow: hidden;
            &:before {
                display: table;
                content: "";
            }
            li {
                list-style: none;
            }
            .is-opened .icon-arrow {
                transform: rotate(180deg);
            }
            .secondUl {
                display: none;
            }
            .sub-menu.is-opened {
                .secondUl {
                    display: block;
                }
            }
            .sub-menu {
                .submenu-title {
                    position: relative;
                    height: 1rem;
                    line-height: 1rem;
                    @include sc(.4rem, #666);
                    padding: 0 0.2rem;
                    cursor: pointer;
                    position: relative;
                    transition: border-color .3s, background-color .3s, color .3s;
                    box-sizing: border-box;
                    white-space: nowrap;
                    span.cur{
                      @include sc(.4rem, #c00);
                    }
                    .icon-arrow {
                        position: absolute;
                        right: 0.5rem;
                        top: 0.6rem;
                        z-index: 1;
                        @include wh(0.3rem, 0.3rem);
                    }
                }
                [class*=" el-icon-"] {
                    font-family: element-icons!important;
                    speak: none;
                    font-style: normal;
                    font-weight: 400;
                    font-variant: normal;
                    text-transform: none;
                    line-height: 1;
                    vertical-align: baseline;
                    display: inline-block;
                    -webkit-font-smoothing: antialiased;
                    -moz-osx-font-smoothing: grayscale;
                }
                .menu-item-group-title {
                    padding: 0 0.3rem 0 0.5rem;
                }
                .children-item {
                    padding-left: 0.7rem;
                }
                // .menu-item-group >.secondUl {
                //     // padding-left: 1rem;
                // }
            }
        }
    }
    .menu_right {
        flex: 4;
        overflow-y: auto;
        .menu_detail_list {
            background-color: #fff;
            padding: .6rem .4rem;
            border-bottom: 1px solid #ccc;
            position: relative;
            overflow: hidden;
            .menu_detail_link {
                display: flex;
                .menu_food_img {
                    margin-right: .4rem;
                    img {
                        @include wh(2rem, 2rem);
                        display: block;
                    }
                }
                .menu_food_description {
                    width: 100%;
                    .food_description_head {
                        line-height: 0.5rem;
                        overflow: hidden;
                        .description_foodname {
                            @include sc(.5rem, #333);
                        }
                    }
                    .food_price_num {
                        @include fj;
                        .food_price {
                            span {
                                font-family: 'Helvetica Neue', Tahoma, Arial;
                            }
                            span:nth-of-type(1) {
                                @include sc(.6rem, #f60);
                                margin-right: .08rem;
                            }
                            span:nth-of-type(2) {
                                @include sc(.6rem, #f60);
                                font-weight: bold;
                                margin-right: .2rem;
                            }
                        }
                    }
                    .buy-cart {
                        .price-icon {
                            position: relative;
                            top: 0.16rem;
                            img {
                                @include wh(0.8rem, 0.8rem);
                            }
                        }
                    }
                    .cart_num {
                        font-size: .65rem;
                        color: #666;
                        min-width: 1rem;
                        text-align: center;
                        font-family: Helvetica Neue, Tahoma;
                    }
                }
            }
        }
    }
}

.buy_cart_container {
    position: absolute;
    background-color: #3d3d3f;
    bottom: 0;
    left: 0;
    z-index: 13;
    display: flex;
    @include wh(100%, 2rem);
    .cart_icon_num {
        flex: 1;
        .cart_icon_container {
            display: flex;
            background-color: #3d3d3f;
            position: absolute;
            padding: .4rem;
            border: 0.18rem solid #444;
            border-radius: 50%;
            left: .5rem;
            top: -.7rem;
            .cart_icon {
                @include wh(1.2rem, 1.2rem);
            }
            .cart_list_length {
                position: absolute;
                top: -.25rem;
                right: -.25rem;
                background-color: #ff461d;
                line-height: .7rem;
                text-align: center;
                border-radius: 50%;
                border: 0.025rem solid #ff461d;
                min-width: .7rem;
                height: .7rem;
                @include sc(.5rem, #fff);
                font-family: Helvetica Neue, Tahoma, Arial;
            }
        }
        .move_in_cart {
            animation: mymove .5s ease-in-out;
        }
        .cart_icon_activity {
            background-color: #3190e8;
        }
        .cart_num {
            @include ct;
            left: 3.5rem;
            div {
                color: #fff;
            }
            div:nth-of-type(1) {
                font-size: .8rem;
                font-weight: bold;
                margin-bottom: .1rem;
            }
            div:nth-of-type(2) {
                font-size: .4rem;
            }
        }
    }
    .gotopay {
        position: absolute;
        right: 0;
        background-color: #535356;
        @include wh(5rem, 100%);
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        .gotopay_button_style {
            @include sc(.7rem, #fff);
            font-weight: bold;
        }
    }
    .gotopay_acitvity {
        background-color: #4cd964;
    }
}

.fade-enter-active,
.fade-leave-active {
    transition: opacity .5s;
}

.fade-enter,
.fade-leave-active {
    opacity: 0;
}

.toggle-cart-enter-active,
.toggle-cart-leave-active {
    transition: all .3s ease-out;
}

.toggle-cart-enter,
.toggle-cart-leave-active {
    transform: translateY(100%);
}

.cart_food_list {
    position: fixed;
    width: 100%;
    padding-bottom: 2rem;
    z-index: 12;
    bottom: 0;
    left: 0;
    background-color: #fff;
    header {
        @include fj;
        align-items: center;
        padding: .3rem .6rem;
        background-color: #eceff1;
        .hsz {
            @include wh(.6rem, .6rem);
            vertical-align: middle;
        }
        h4 {
            @include sc(.7rem, #666);
        }
        .clear_cart {
            @include sc(.6rem, #666);
        }
    }
    .cart_food_details {
        background-color: #fff;
        max-height: 20rem;
        overflow-y: auto;
        padding-bottom: 1rem;
        .cart_food_li {
            @include fj;
            padding: .6rem .5rem 0;
            .cart_list_num {
                width: 55%;
                p:nth-of-type(1) {
                    @include sc(.7rem, #666);
                    font-weight: bold;
                }
                p:nth-of-type(2) {
                    @include sc(.4rem, #666);
                }
            }
            .cart_list_price {
                font-size: 0;
                span:nth-of-type(1) {
                    @include sc(.6rem, #f60);
                    font-family: Helvetica Neue, Tahoma;
                }
                span:nth-of-type(2) {
                    @include sc(.7rem, #f60);
                    font-family: Helvetica Neue, Tahoma;
                    font-weight: bold;
                }
            }
            .cart_list_control {
                display: flex;
                align-items: center;
                span {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
                svg {
                    @include wh(.9rem, .9rem);
                    fill: #3190e8;
                }
                .specs_reduce_icon {
                    fill: #999;
                }
                .cart_num {
                    @include sc(.65rem, #666);
                    min-width: 1rem;
                    text-align: center;
                    font-family: Helvetica Neue, Tahoma;
                }
            }
        }
    }
}

.price-icon {
    position: relative;
    img {
        @include wh(0.8rem, 0.8rem);
    }
}

.screen_cover {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, .3);
    z-index: 11;
}
.sel-taste-section{
  clear:both;
  padding: 0 .5rem;
  line-height: 1rem;
}

</style>

<template lang="html">

<div class="">
    <head-top :head-title="'点菜'" goBack="true"></head-top>
    <section class="shop_container">
        <section class="food_container">
            <section class="menu_container">
                <section class="menu_left" id="wrapper_menu" ref="wrapperMenu">
                    <ul class="sidebar-menu menu firstUl">
                        <li class="sub-menu is-opened" v-for="(item,index) in listDatas" :key="index">
                            <div class="submenu-title">
                                <span :class="{'cur':foodsListIndex==index}" @click="handlerFoodDtails(item,index)">{{item.name}}</span>
                            </div>
                            <ul class="menu secondUl">
                                <li class="menu-item-group" v-for="(list,index) in item.sonList" :key="index">
                                    <div class="submenu-title menu-item-group-title">{{list.name}}</div>
                                    <ul class="threeUl">
                                        <li class="submenu-title children-item" v-for="(li,index) in list.sonList">{{li.name}}</li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </section>
                <section class="menu_right">
                    <section class="menu_detail_list" v-for="(foods,foodindex) in foodsList" :key="foodindex">
                        <div class="menu_detail_link">
                            <section class="menu_food_img">
                                <img :src="foods.image">
                            </section>
                            <section class="menu_food_description">
                                <h3 class="food_description_head">
                                            <strong class="description_foodname">{{foods.foodName}}</strong>
                                        </h3>
                                <section class="food_price_num">
                                    <section class="food_price">
                                        <span>¥</span><span>{{foods.price}}</span>
                                    </section>
                                    <buy-cart :foodsList='foodsList' :shopId='shopId' :foods='foods'></buy-cart>
                                </section>
                                <section class="">
                                    <sel-taste :shopId='shopId' :foods='foods'></sel-taste>
                                </section>
                            </section>
                        </div>
                    </section>
                </section>
            </section>
            <section class="buy_cart_container">
                <section class="cart_icon_num" @click="toggleCartList">
                    <div class="cart_icon_container" :class="{cart_icon_activity: totalPrice > 0}" ref="cartContainer">
                        <span v-if="totalNum" class="cart_list_length">
                              {{totalNum}}
                          </span>
                        <img class="cart_icon" src="../../assets/images/cart.png" alt="">
                    </div>
                    <div class="cart_num">
                        <div>¥ {{totalPrice}}</div>
                    </div>
                </section>
                <router-link :to="{path:'/confirmOrder', query:{shopId,status}}" class="gotopay_button_style">
                    <section class="gotopay gotopay_acitvity">
                        <span class="gotopay_button_style">下单</span>
                    </section>
                </router-link>
            </section>
            <transition name="toggle-cart">
                <section class="cart_food_list" v-show="showCartList&&cartFoodList.length">
                    <header>
                        <h4>点菜列表</h4>
                        <div @click="clearCart">
                            <img class="hsz" src="../../assets/images/hsz.png" alt="">
                            <span class="clear_cart">清空</span>
                        </div>
                    </header>
                    <section class="cart_food_details" id="cartFood">
                        <ul>
                            <li v-for="(item, index) in cartFoodList" :key="index" class="">
                                <div class="cart_food_li">
                                  <div class="cart_list_num">
                                      <p class="ellipsis">{{item.name}}</p>
                                      <p class="ellipsis">{{item.specs}}</p>
                                  </div>
                                  <div class="cart_list_price">
                                      <span>¥</span>
                                      <span>{{item.price}}</span>
                                  </div>
                                  <section class="cart_list_control">
                                      <span class="price-icon" @click="removeOutCart(item.id, item.name, item.price)"><img src="../../assets/images/remove.png" alt=""></span>
                                      <span class="cart_num">{{item.num}}</span>
                                      <span class="price-icon" @click="addToCart(item.id,item.name,item.price)"><img src="../../assets/images/add.png" alt=""></span>
                                  </section>
                                </div>
                                <div class="sel-taste-section">
                                    <sel-taste :shopId='shopId' :foods='item'></sel-taste>
                                </div>
                            </li>
                        </ul>
                    </section>
                </section>
            </transition>
            <transition name="fade">
                <div class="screen_cover" v-show="showCartList&&cartFoodList.length" @click="toggleCartList"></div>
            </transition>
        </section>
    </section>
</div>

</template>

<script>
import {
  setStore, getStore
}
from '../../config/mUtils.js'

import headTop from '../../components/header/head'
import buyCart from '../../components/common/buyCart'
import selTaste from '../../components/common/selTaste'

import {
    mapState, mapMutations
}
from 'vuex'
export default {
    components: {
        headTop,
        buyCart,
        selTaste
    },
    data() {
        return {
            status:null,
            shopId: null, // 餐桌号
            cartFoodList: [], //购物车商品列表,
            totalPrice: 0, //总共价格
            categoryNum: [], //商品类型右上角已加入购物车的数量
            showCartList: false, //显示购物车列表
            isShowAletContainer: false, //显示购物车列表
            listDatas: [],
            foodsList: [],
            foodsListIndex:-1
        }
    },
    created() {
        this.shopId = this.$route.params.id
        this.status = this.$route.query.status
        this.INIT_BUYCART()
    },
    async beforeMount() {

    },
    computed: {
        ...mapState([
                'cartList'
            ]),
            totalNum() {
                let num = 0;
                this.cartFoodList.forEach(item => {
                    num += item.num
                })
                return num
            },
            //当前商店购物信息
            shopCart: function() {
                return {...this.cartList[this.shopId]
                };
            },
    },
    mounted() {
        this.getFoodTypeListType()
        if(getStore('foodsList')){
            let foodsList = JSON.parse(getStore('foodsList'))
            console.log(foodsList.item.id)
            this.getFoodTypeList(foodsList.item.id)
            this.foodsListIndex = foodsList.index
        }





        this.$nextTick(() => {
            this.initCategoryNum();
        })
    },
    watch: {
        shopCart: function(value) {
            this.initCategoryNum();
        },
        //购物车列表发生变化，没有商铺时，隐藏
        cartFoodList: function(value) {
            if (!value.length) {
                this.showCartList = false;
            }
        },
    },
    methods: {
        ...mapMutations([
                'INIT_BUYCART', 'ADD_CART', 'REDUCE_CART', 'CLEAR_CART',''
            ]),
            /**
             * 初始化和shopCart变化时，重新获取购物车改变过的数据，赋值 categoryNum，totalPrice，cartFoodList，整个数据流是自上而下的形式，所有的购物车数据都交给vuex统一管理，包括购物车组件中自身的商品数量，使整个数据流更加清晰
             */
            initCategoryNum() {
                let cartFoodNum = 0;
                this.totalPrice = 0;
                this.cartFoodList = [];
                this.foodsList.forEach((item, index) => {
                    if (this.shopCart && this.shopCart[item.id]) {
                        let num = 0;
                        Object.keys(this.shopCart[item.id]).forEach(foodid => {
                            let foodItem = this.shopCart[item.id][foodid];
                            num += foodItem.num;
                            this.totalPrice += foodItem.num * foodItem.price;
                            if (foodItem.num > 0) {
                                this.cartFoodList[cartFoodNum] = {};
                                this.cartFoodList[cartFoodNum].id = foodid;
                                this.cartFoodList[cartFoodNum].num = foodItem.num;
                                this.cartFoodList[cartFoodNum].price = foodItem.price;
                                this.cartFoodList[cartFoodNum].name = foodItem.name;
                                cartFoodNum++;
                            }
                        })
                    }

                })
                console.log(this.cartFoodList)
                this.totalPrice = this.totalPrice.toFixed(2);
            },
            //控制购物列表是否显示
            toggleCartList() {
                this.cartFoodList.length ? this.showCartList = !this.showCartList : true;
            },

            //加入购物车，所需参数，食品分类id，食品名字，食品价格
            addToCart(food_id, food_name, food_price) {
                this.ADD_CART({
                    shopid: this.shopId,
                    food_id,
                    food_name,
                    food_price
                });
            },
            //移出购物车，所需参数，食品分类id，食品名字，食品价格
            removeOutCart(food_id, food_name, food_price) {
                this.REDUCE_CART({
                    shopid: this.shopId,
                    food_id,
                    food_name,
                    food_price
                });
            },
            //清除购物车
            clearCart() {
                this.toggleCartList();
                this.CLEAR_CART(this.shopId);
            },
            showAletContainer(){
                this.$refs.refDelDialog.childMethod()
            },
            // 获取菜单
            getFoodTypeListType(){
              this.$http.get(this.HttpUrl.UrlConfig.getFoodTypeListType)
                  .then(res => {
                      res = res.data
                      this.listDatas = res.foodTypeList
                  }).catch(error => {
                      console.log(error)
                  })
            },
            // 点击菜单获取菜品
            handlerFoodDtails(item,index){
              this.foodsListIndex = index
              this.getFoodTypeList(item.id)
              let foodsList = {
                'item':item,
                'index':index
              }
              setStore('foodsList',foodsList)
            },
            // 根据ID 获取菜品
            getFoodTypeList(filter_EQL_foodType){
              this.$http.get(this.HttpUrl.UrlConfig.getFoodTypeList+'?filter_EQL_foodType=' + filter_EQL_foodType)
                  .then(res => {
                      res = res.data
                      this.foodsList = res.result
                  }).catch(error => {
                      console.log(error)
                  })
            },

    }
}

</script>
